<template>
  <div class="floorBox">

    <div style="padding-top: 0.5vh;width: 99%;margin: 0 auto;height: 6vh;color: white;font-size: 1.8vh;text-align: left;">
      <div style="display: inline;float: left;margin-left: 1vh;border-left: 6px #409EFF solid;"><span style="margin-left: 1vh;">房间信息</span></div>
      <div style="display: inline;float: left;margin-left: 5vh;width: 15vh;">名称:<span style="margin-left: 1vh;" attr="floorName">{{roomData.room_name}}</span></div>
      <div style="display: inline;float: left;margin-left: 5vh;width: 15vh;">长度:<span style="margin-left: 1vh;" attr="floorArea" >{{roomData.room_length}}</span>㎡</div>
      <div style="display: inline;float: left;margin-left: 5vh;width: 15vh;">宽度:<span style="margin-left: 1vh;" attr="floorArea" >{{roomData.room_width}}</span>㎡</div>
      <div style="display: inline;float: left;margin-left: 5vh;width: 15vh;">高度:<span style="margin-left: 1vh;" attr="floorHeight">{{roomData.room_height}}</span>m</div>
      <div style="display: inline;float: left;margin-left: 5vh;width: 15vh;">面积:<span style="margin-left: 1vh;" attr="floorHeight">{{roomData.room_area}}</span>㎡</div>
      <div style="display: inline;float: left;margin-left: 5vh;width: 15vh;">位置:<span style="margin-left: 1vh;" attr="floorHeight">{{roomData.room_location}}</span>m</div>

      <div style="display: inline;float: right;">

        <el-button size="small" type="primary" icon="el-icon-edit" @click="updateRoom">修改房间</el-button>
        <el-button size="small" type="primary" icon="el-icon-connection" @click="cloneRoom">复制房间</el-button>
        <el-button size="small" type="danger" icon="el-icon-delete" @click="removeRoom">删除房间</el-button>
      </div>

    </div>



    <!-- 修改房间信息 -->
    <el-dialog title="房间信息" width="120vh"  :visible.sync="dialogFormVisible" align="left">

      <el-form ref="roomData"  :rules="roomRules"  label-width="80px" label-suffix	=":" align="left"  style="margin-top: 1.5vh;color: #FFFFFF;"  :inline="true" :model="roomData" >

        <el-form-item  label="名称" prop="room_name">
          <el-input v-model="roomData.room_name"></el-input>
        </el-form-item>

        <el-form-item  label="长度" prop="room_length">
          <el-input v-model="roomData.room_length">
            <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
          </el-input>
        </el-form-item>

        <el-form-item  label="高度" prop="room_height">
          <el-input v-model="roomData.room_height">
            <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
          </el-input>
        </el-form-item>

        <el-form-item  label="厚度" prop="room_width">
          <el-input v-model="roomData.room_width">
            <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
          </el-input>
        </el-form-item>

        <el-form-item  label="面积" prop="room_width">
          <el-input v-model="roomData.room_area">
            <i slot="suffix" style="font-style:normal;margin-right: 10px;">㎡</i>
          </el-input>
        </el-form-item>

        <el-form-item  label="位置" prop="room_location">
          <el-input v-model="roomData.room_location">
          </el-input>
        </el-form-item>


      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" icon="el-icon-circle-check" @click="saveRoom" >保存</el-button>
        <el-button type="primary" icon="el-icon-circle-close" size="small" @click="dialogFormVisible = false;">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 修改房间信息 -->






    <!-- 修改墙面信息 -->
    <el-dialog title="墙面信息" width="120vh"  :visible.sync="updateTableWallDialogFormVisible" align="left">

      <el-form ref="wallData"  :rules="wallRules"  label-width="120px" label-suffix	=":" align="left"  style="margin-top: 1.5vh;color: #FFFFFF;"  :inline="true" :model="wallData" >

        <el-form-item  label="名称" prop="wall_name">
          <el-input v-model="wallData.wall_name"></el-input>
        </el-form-item>

        <el-form-item  label="长度" prop="wall_length">
          <el-input v-model="wallData.wall_length">
            <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
          </el-input>
        </el-form-item>

        <el-form-item  label="高度" prop="wall_width">
          <el-input v-model="wallData.wall_width">
            <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
          </el-input>
        </el-form-item>

        <el-form-item  label="厚度" prop="wall_thick">
          <el-input v-model="wallData.wall_thick">
            <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
          </el-input>
        </el-form-item>

        <el-form-item  label="材质" prop="wall_structure">
          <el-select v-model="wallData.wall_structure" placeholder="">
            <el-option
              v-for="item in wallStructureOption"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item  label="位置" prop="wall_location">
          <el-input v-model="wallData.wall_location">

          </el-input>
        </el-form-item>

        <el-form-item  label="墙面倾斜角度" prop="wall_angle">
          <el-input v-model="wallData.wall_angle">

          </el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" icon="el-icon-circle-check" @click="updateTableWallDialogFormVisible = false;" >保存</el-button>
        <el-button type="primary" icon="el-icon-circle-close" size="small" @click="updateTableWallDialogFormVisible = false;">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 修改墙面信息 -->




    <!-- 修改窗户信息 -->
    <el-dialog title="窗户信息" width="120vh"  :visible.sync="updateTableWindowDialogFormVisible" align="left">

      <el-form ref="windowData"  :rules="windowRules"  label-width="100px" label-suffix	=":" align="left"  style="margin-top: 1.5vh;color: #FFFFFF;"  :inline="true" :model="windowData" >

        <el-form-item  label="窗户名称" prop="window_name">
          <el-input v-model="windowData.window_name"></el-input>
        </el-form-item>

        <el-form-item  label="位置" prop="window_location">
          <el-input v-model="windowData.window_location">

          </el-input>
        </el-form-item>

        <el-form-item  label="长度" prop="window_lenght">
          <el-input v-model="windowData.window_lenght">
            <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
          </el-input>
        </el-form-item>

        <el-form-item  label="宽度" prop="window_width">
          <el-input v-model="windowData.window_width">
            <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
          </el-input>
        </el-form-item>

        <el-form-item  label="面积" prop="window_area">
          <el-input v-model="windowData.window_area">
            <i slot="suffix" style="font-style:normal;margin-right: 10px;">㎡</i>
          </el-input>
        </el-form-item>

        <el-form-item  label="材质" prop="window_structure">
          <el-select v-model="windowData.window_structure" placeholder="">
            <el-option
              v-for="item in windowStructureOption"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>



      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" icon="el-icon-circle-check" @click="updateTableWindowDialogFormVisible = false;" >保存</el-button>
        <el-button type="primary" icon="el-icon-circle-close" size="small" @click="updateTableWindowDialogFormVisible = false;">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 修改窗户信息 -->






    <div id="my_table" style="width: 95%;margin:0 auto;height: auto;">
      <el-table :data="roomData.wallDataArrs" :cell-style="cellStyle" :header-cell-style="headerStyle" :row-style="headerStyle" :header-row-style="cellStyle" element-loading-text="正在加载中..." element-loading-background="rgba(0, 0, 0, .3)" >
        <el-table-column type="expand" prop="names">
          <template slot-scope="scope" >
            <el-table :cell-style="cellStyle" :header-cell-style="headerStyle" :row-style="headerStyle" :header-row-style="cellStyle"  :data="scope.row.windowDataArrs" >
              <el-table-column prop="name" label="窗户名称"  align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.window_name}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="num" label="位置"  align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.window_location}}</span>
                </template>
              </el-table-column>

              <el-table-column prop="num" label="长度"  align="center">
                  <template slot-scope="scope">
                    <span>{{scope.row.window_lenght}}</span>
                  </template>
              </el-table-column>

              <el-table-column prop="num" label="宽度"  align="center">
                  <template slot-scope="scope">
                    <span>{{scope.row.window_width}}</span>
                  </template>
              </el-table-column>

              <el-table-column prop="num" label="面积"  align="center">
                  <template slot-scope="scope">
                    <span>{{scope.row.window_area}}</span>
                  </template>
              </el-table-column>

              <el-table-column prop="num" label="材质"  align="center">
                  <template slot-scope="scope">
                    <!--<span>{{scope.row.window_structure}}</span>-->

                    <el-select disabled v-model="scope.row.window_structure" placeholder="">
                      <el-option
                        v-for="item in windowStructureOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>

                  </template>
              </el-table-column>




              <el-table-column fixed="right" align="center" width="200" label="操作">
                <template slot-scope="scope">
                  <el-button size="small" type="primary" icon="el-icon-edit" @click="updateTableWindow(scope.row,scope.$index)" >编辑</el-button>
                  <el-button size="small" type="danger" icon="el-icon-delete" @click="removeTableWindow(scope.row,scope.$index)"  >删除</el-button>
                </template>
              </el-table-column>

            </el-table>
          </template>
        </el-table-column>

        <el-table-column prop="Id" label="墙面名称" align="center" >
          <template slot-scope="scope">
            <span>{{scope.row.wall_name}}</span>
          </template>
        </el-table-column>

        <el-table-column prop="Id" label="长度" align="center" >
          <template slot-scope="scope">
            <span>{{scope.row.wall_length}}</span>
          </template>
        </el-table-column>

        <el-table-column prop="Id" label="宽度" align="center" >
          <template slot-scope="scope">
            <span>{{scope.row.wall_thick}}</span>
          </template>
        </el-table-column>

        <el-table-column prop="Id" label="高度" align="center" >
          <template slot-scope="scope">
            <span>{{scope.row.wall_width}}</span>
          </template>
        </el-table-column>

        <el-table-column prop="Id" label="材质" align="center" >
          <template slot-scope="scope">
            <!--<span>{{scope.row.wall_structure}}</span>-->
            <el-select disabled v-model="scope.row.wall_structure" placeholder="">
              <el-option
                v-for="item in wallStructureOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column prop="Id" label="位置" align="center" >
          <template slot-scope="scope">
            <span>{{scope.row.wall_location}}</span>
          </template>
        </el-table-column>

        <el-table-column prop="Id" label="墙面倾斜角度" align="center" >
          <template slot-scope="scope">
            <span>{{scope.row.wall_angle}}</span>
          </template>
        </el-table-column>

        <el-table-column fixed="right" align="center" width="200" label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="primary" icon="el-icon-edit" @click="updateTableWall(scope.row,scope.$index)" >编辑</el-button>
            <el-button size="small" type="danger" icon="el-icon-delete" @click="removeTableWall(scope.row,scope.$index)"  >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="height: 2vh;"></div>

    </div>


  </div>






</template>

<script>
  import wallTemplate from '../loadSimulation/wallTemplate'
  import homeTemplate from './roomTemplate'

  export default {
    name: 'floorTemplate',
    components: {
      wallTemplate,
      homeTemplate
    },
    data() {
      return {

        windowStructureOption: [{
          value: '1',
          label: '单层玻璃'
        }, {
          value: '2',
          label: '双层玻璃'
        }, {
          value: '3',
          label: '三层玻璃'
        }],

        wallStructureOption: [{
          value: '1',
          label: '混凝土'
        }, {
          value: '2',
          label: '玻璃'
        }, {
          value: '3',
          label: '石头'
        }],


        wallData : {
          wall_id : '',//墙面id
          wall_name : '', //墙面名称
          wall_location : '', //墙面位置
          wall_thick : '', //墙面厚度
          wall_width : '',//墙面高度
          wall_length : '',//长度
          wall_angle : '',//墙面倾斜角度
          wall_structure : '',//材质
          windowDataArrs:[

          ],
        },
        windowData : {
          window_name : '', //窗户名称
          window_location : '', //窗户位置
          window_width : '', //窗户宽度
          window_lenght : '',//窗户高度
          window_area : '',//窗户面积
          window_thick : '',//窗户厚度
          window_structure : '',//窗户材质
        },
        wallRules: {
          wall_name: [
            { required: true, message: '请输入墙面名称', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          wall_location: [
            { required: true, message: '请输入墙面位置', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          wall_thick: [
            { required: true, message: '请输入墙面厚度', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          wall_width: [
            { required: true, message: '请输入墙面高度', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          wall_length: [
            { required: true, message: '请输入墙面长度', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          wall_angle: [
            { required: true, message: '请输入墙面倾斜角度', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          wall_structure: [
            { required: true, message: '请输入墙面材质', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ]
        },

        windowRules: {
          window_name: [
            { required: true, message: '请输入窗户名称', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          window_location: [
            { required: true, message: '请输入窗户位置', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          window_width: [
            { required: true, message: '请输入窗户宽度', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          window_lenght: [
            { required: true, message: '请输入窗户长度', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          window_thick: [
            { required: true, message: '请输入窗户厚度', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          window_area: [
            { required: true, message: '请输入窗户面积', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          window_structure: [
            { required: true, message: '请输入窗户材质', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ]
        },

        dialogFormVisible : false,
        updateTableWallDialogFormVisible : false,
        updateTableWindowDialogFormVisible : false,
        roomRules: {
            room_name: [
              { required: true, message: '请输入房间名称', trigger: 'blur' },
              { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
            ],
              room_length: [
              { required: true, message: '请输入房间长度', trigger: 'blur' },
              { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
            ],
              room_width: [
              { required: true, message: '请输入房间厚度', trigger: 'blur' },
              { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
            ],
              room_height: [
              { required: true, message: '请输入房间高度', trigger: 'blur' },
              { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
            ],
            room_area: [
              { required: true, message: '请输入房间面积', trigger: 'blur' },
              { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
            ],
              room_location: [
              { required: true, message: '请输入房间位置', trigger: 'blur' },
              { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
            ]
        }
      }
    },
    props: {
      roomData : {
        room_id : '',//房间id
        room_name : '',
        room_length : '',
        room_width : '',
        room_height : '',
        room_area : '',
        room_location : '',
        wallDataArrs:[
           {
              wall_id : '',//墙面id
              wall_name : '', //墙面名称
              wall_location : '', //墙面位置
              wall_thick : '', //墙面厚度
              wall_width : '',//墙面高度
              wall_length : '',//长度
              wall_angle : '',//墙面倾斜角度
              wall_structure : '',//材质
              windowDataArrs:[

              ],
          },
        ],

      },
      index : '',

    },

    mounted() {

      var code = "wallStructure";
      //初始化页面下拉
      this.$http.post("/iepsapi/fhfz/sceneSettings/retrievePageOption?code="+code, {}).then((res) => {
        var option = res.data;
        this.wallStructureOption = option;
      });

      var code = "windowStructure";
      //初始化页面下拉
      this.$http.post("/iepsapi/fhfz/sceneSettings/retrievePageOption?code="+code, {}).then((res) => {
        var option = res.data;
        this.windowStructureOption = option;
      });

    },
    methods: {

      cellStyle ({ row, column, rowIndex, columnIndex }) {
          return 'background:rgba(70,87,158, 1);border:none;'
      },
      headerStyle ({ row, column, rowIndex, columnIndex }) {
        return 'background:rgba(52,52,147, 0.6);border:none;'
      },

      cloneObj:function (obj) {
        var newObj = {};
        if (obj instanceof Array) {
          newObj = [];
        }
        for (var key in obj) {

          var isId = key.substring(key.length-"_id".length)=="_id";

          var val = obj[key];

          if(isId){
            val = '';
          }

          //newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; //arguments.callee 在哪一个函数中运行，它就代表哪个函数, 一般用在匿名函数中。
          newObj[key] = typeof val === 'object' ? this.cloneObj(val): val;
        }
        return newObj;
      },

      /*  修改房间  */
      updateRoom : function(){
        this.dialogFormVisible = true;
      },
      /* 保存房间信息 */
      saveRoom : function(){
        this.$refs['roomData'].validate((valid) => {
          if (valid) {
            this.dialogFormVisible = false;
          } else {
            return false;
          }
        });
      },
      /* 复制房间 */
      cloneRoom : function(){
        this.$emit('cloneRoom', this.index)
      },
      /* 删除房间 */
      removeRoom : function(){
        this.$emit('removeRoom', this.index)
      },


      /* 新建墙面信息 */
      createWall : function(){
        var wallData = {
            wall_name : '', //墙面名称
            wall_location : '', //墙面位置
            wall_thick : '', //墙面厚度
            wall_width : '',//墙面高度
            wall_length : '',//长度
            wall_angle : '',//墙面倾斜角度
            wall_structure : '',//材质
        };
        this.wallDataArrs.push(wallData);
      },
      /* 删除墙面 */
      removeWall : function (index) {

        this.$confirm('是否确认删除该墙面信息，删除时将同步删除墙面下级关联节点！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',

          type: 'warning'
        }).then(() => {

          //根据子组件传递的index删除父组件当中的墙面数组当中的墙面数据
          var removeObj =  this.wallDataArrs.splice(index,1);

          if(removeObj!=null&&removeObj!=""){
            this.$http.post("/iepsapi/fhfz/sceneSettings/deleteWall?", {removeObj}).then((res) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            })
          }else{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });


      },
      /* 复制墙面 */
      cloneWall : function (index) {
        //根据子组件传递的index，在index后的位置，复制一个相同的墙面节点
        var wallData = this.wallDataArrs[index];
        var newWallData = this.cloneObj(wallData);
        newWallData.wall_id = '';
        this.wallDataArrs.splice(index+1,0,newWallData);
      },
      /* 修改表格内的墙面信息 */
      updateTableWall : function (row,index) {
        this.wallData = row;
        this.updateTableWallDialogFormVisible = true;
      },
      /* 删除表格内的墙面信息 */
      removeTableWall : function (row,index) {

        this.$confirm('是否确认删除该墙面信息，删除时将同步删除墙面下级关联节点！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',

          type: 'warning'
        }).then(() => {

          //根据子组件传递的index删除父组件当中的墙面数组当中的墙面数据
          var removeObj = this.roomData.wallDataArrs.splice(index,1);

          if(removeObj!=null&&removeObj!=""){
            this.$http.post("/iepsapi/fhfz/sceneSettings/deleteWall?", {removeObj}).then((res) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            })
          }else{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });


      },
      /* 修改表格内的窗户信息 */
      updateTableWindow : function (row,index) {
        this.windowData = row;
        this.updateTableWindowDialogFormVisible = true;
      },
      /* 删除表格内的窗户信息 */
      removeTableWindow : function (row,index) {

        this.$confirm('是否确认删除该窗户信息！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',

          type: 'warning'
        }).then(() => {

          //根据子组件传递的index删除父组件当中的窗户数组当中的窗户数据
          var removeObj = this.roomData.wallDataArrs[row.wallIndex].windowDataArrs.splice(index,1);

          var window_id = removeObj[0].window_id;

          if(window_id!=null&&window_id!=""){

            this.$http.post("/iepsapi/fhfz/sceneSettings/deleteWindow?window_id="+window_id, {}).then((res) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            })

          }else{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });




      }

    }
  }
</script>



<style scoped >

  .floorBox{
    width: 100%;
    margin-top: 1vh;
    background: inherit;
    color: white;
    min-height: 20vh;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(81,101,205, 1);
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }

  /* 去除表格线 */
  .my_table >>> .el-table__row>td{
    /* 去除表格线 */
    border: none;
  }

  /deep/ .el-table__empty-text {
    line-height: 60px;
    width: 50%;
    color: #FFF;
  }

  /deep/ .el-input.is-disabled .el-input__inner{
    background-color: #46579E;
    border-color: #46579E;
    color: #FFFFFF;
    text-align: center;
    cursor: not-allowed;
  }

  .my_table >>> .el-table th.is-leaf {
    /* 去除上边框 */
    border: none;
  }
  .my_table >>> .el-table::before{
    /* 去除下边框 */
    height: 0;
  }

  /deep/ .el-table--enable-row-transition .el-table__body td {
    -webkit-transition: background-color .25s ease;
    transition: background-color .25s ease;
    background:rgba(70,87,158, 0.9);
    border: none;
  }

  /deep/ .el-table th, .el-table tr {
    background:rgba(70,87,158, 0.9);
    border: none;

  }

  /deep/ .el-table tr {
    background:rgba(70,87,158, 0.9);
    border: none;

  }

  /deep/ .el-table__body-wrapper {
    overflow: hidden;
    position: relative;
    background:rgba(70,87,158, 1);
    border: none;

  }

  /deep/ .el-dialog, .el-pager li {
    background:rgba(70,87,158, 0.9);
    -webkit-box-sizing: border-box;
    border: none;

  }

  /deep/ .el-table .cell {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
    color: #FFF;
    padding-right: 10px;
    border: none;

  }

  /deep/ .el-table th>.cell {
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    color: #FFF;
    border: none;

  }

  /deep/ .el-table__expand-icon>.el-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -5px;
    margin-top: -5px;
    color: #FFF;
    border: none;

  }

  /deep/ .el-dialog__header {
    padding: 20px 20px 10px;
    color: #FFF;
    background:rgba(70,87,158, 0.9);
  }


  /deep/   .el-table::before {
    left: 0;
    bottom: 0;
    width: 100%;
    background:rgba(41,141,247, 1);
    height: 0px;
  }

  /deep/  .el-table__fixed-right::before, .el-table__fixed::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0px;
    background:rgba(41,141,247, 1);
    z-index: 4;
  }

  /deep/ .el-dialog__title {
    line-height: 15px;
    font-size: 16px;
    color: #FFF;
  }

  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #4891EE;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }


  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #FFFFFF;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }

  /deep/ .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #FFF !important;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }


  .box1{
    position: relative;
    width: 100%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    min-height: 45vh;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }

  .box2{
    position: relative;
    width: 100%;
    min-height: 25vh;
    margin-top:0.5%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }




  .title{
    width:100%;
    height:5vh;
    line-height: 5vh;
    background:rgba(55, 69, 144, 1);

    font-weight:bold;
    background: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 1.5vh;
    color: #FFFFFF;
    text-align: left;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(55, 69, 144, 1);
    border-radius: 1px;
    -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.345098039215686);
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.345098039215686);
  }


</style>
